/*1. less文件的后缀 .less*/
/*2. 文件里面可以写什么 之前学习的 css语法 以及 less语法 */

/*嵌套 嵌套就是我们之前写的 css 类选择器的层级关系 */
.box {
  width: 100px;
  height: 100px;
  background-color: gold;

  .hd {
    .title {
      font-size: 20px;
      color: #ff0000;

      .big-title {
        color: #0f0;
      }
    }

    p {
      font-size: 30px;
      color: #00f;
    }
  }

}

/*上面的代码编译后形成如下的代码
.box .hd .title {
  font-size: 20px;
  color: #ff0000;
}
.box .hd .title .big-title{
  color: #0f0;
}
.box .hd p{
  font-size: 30px;
  color: #00f;
}

*/

/*less语法有什么？ 1. 变量 */
/*定义变量*/
@width: 200px;
@height: @width + 10px;


/*使用变量*/
#header {
  width: @width;
  height: @height;
  background-color: #f00;
}
